<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
  <title>记忆课堂</title>
  <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/stylesheets/base.css">
  <style>
    #app {
      margin-top: 30px;
    }
    .adminLoginBox {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    small {
      color: orange;
    }
    .list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .list li {
      cursor: pointer;
    }
    #newTopic {
      padding: 20px;
      box-shadow: 0 0 2px 2px #ccc;
    }
    .addedTopic {
      margin: 20px 0;
    }
    
  </style>
</head>
<body>
  
  <div id="app" class="clearfix container col-md-10 col-md-offset-1 col-xs-12 "> 
    <div class="col-md-12">
      <h3 class="text-center">Test Admin</h3>
      <p class="text-center">
        <span class="text-muted">The best preparation for tomorrow is doing your best today.</span>
        <small>对明天做好的准备就是今天做到最好！</small>
      </p>
    </div>

    <ul class="list list-group col-md-2">
      <li class="list-group-item" @click="tabToggle(0)" :class="{'active': tabIndex == 0}">
        用户练习记录
      </li>
      <li class="list-group-item" @click="tabToggle(1)" :class="{'active': tabIndex == 1}" >
        练习习题列表
      </li>
      <li class="list-group-item" @click="tabToggle(2)" :class="{'active': tabIndex == 2}">
        习题答案列表
      </li>
    </ul>
  
    <div class="col-md-10 col-md-offset-0">
      <div class="show-aborad" v-show="!(addTopic || addResult) && showOrUpdateTest.handlerType == 0">
        <div class="handler mb-5 clearfix">
          <button class="btn btn-primary pull-right" v-show="tabIndex == 1" @click="addTopic = true" >
            添加新的习题
          </button>
        </div>
        <table class="table table-bordered ">
          <thead>
            <tr>
              <th>习题标题</th>
              <th>习题类型</th>
              <th>
                <span v-show="tabIndex !== 0">作者</span>
                <span v-show="tabIndex == 0">答题者</span>
              </th>
              <th>答题类型</th>
              <th>
                <span v-show="tabIndex !== 0">创建时间</span>
                <span v-show="tabIndex == 0">答题时间</span>
              </th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(test, index) in list">
              <td>{{test.name}} </td>
              <td>{{newTopicType[test.type - 1]}} </td>
              <td>{{test.autor}} </td>
              <td>{{test.daType == 1 ? '判断题': '自由答题'}} </td>
              <td>{{test.createdAt |date }} </td>
              <td>
                <button @click="handlerTest(1, index)" class="btn btn-sm btn-primary">查看</button>
                <button @click="handlerTest(2, index)" v-show="tabIndex != 0" class="btn btn-sm btn-warning">修改</button>
                <button @click="addResultForTopic(index)" v-show="tabIndex == 1" class="btn btn-sm btn-success">添加答案</button>
                <button @click="handlerTest(3, index)" v-show="tabIndex != 0" class="btn btn-sm btn-danger">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!--添加新的习题-->
      <div v-show="addTopic">
        <new-topic-component v-on:back-topic-list="tabToggle(1)"
        :new-topic-type="newTopicType" :trim="trim">
        </new-topic-component>
      </div>
      <!--练习题展示区域-->
      <div v-if="showOrUpdateTest.handlerType > 0">
        <!-- <topic-card-component :tabIndex="tabIndex" 
        :handlerTest="showOrUpdateTest.test" 
        :handlerType="showOrUpdateTest.handlerType" ></topic-card-component> -->
      

        <form action="" class="form-horizontal">
          <fieldset>
            <legend>习题基本信息</legend>
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>习题名称</th>
                  <th>习题类型</th>
                  <th>答题类型</th>
                  <th>作者</th>
                  <th>创建时间</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    {{showOrUpdateTest.test.name}} 
                  </td>
                  <td>
                    {{newTopicType[showOrUpdateTest.test.type - 1]}} 
                  </td>
                  <td>
                    {{showOrUpdateTest.test.daType == 1 ? '判断对错': '自由答题'}}
                  </td>
                  <td>
                    {{showOrUpdateTest.test.autor}}
                  </td>
                  <td>
                    {{showOrUpdateTest.test.createdAt | date}} 
                  </td>
                </tr>
              </tbody>
            </table>    
          </fieldset>
          <fieldset v-show="tabIndex != 0" >
            <legend>附加信息</legend>
            <div class="form-group">
              <label for="" class="col-md-2 label-control">关键字</label>
              <div class="col-md-10">
                <input type="text" class="form-control" v-model="showOrUpdateTest.test.keyword" :readOnly="showOrUpdateTest.handlerType == 1">
              </div>
            </div>
            <div class="form-group">
              <label for="" class="col-md-2 label-control">习题描述</label>
              <div class="col-md-10">
                <textarea 
                :readOnly="showOrUpdateTest.handlerType == 1" v-model="showOrUpdateTest.test.desc" class="form-control"></textarea>
              </div>
            </div>
          </fieldset>
          <fieldset>
            <legend>习题内容</legend>
            <div class="form-group" v-for="(item, index) in showOrUpdateTest.test.content" >

              <div class="clearfix" v-show="tabIndex == 1">
                <label for="" class="label-control col-md-4">问题{{index + 1}}</label>
                <div class="col-md-8">
                  <input type="text" :readOnly="showOrUpdateTest.handlerType == 1" 
                  class="form-control" v-model="item.wen" >
                </div>
              </div>
              <div class="clearfix" v-show="tabIndex != 1">
                <label for="" class="label-control col-md-4">{{index + 1}} {{item.wen}} </label>
                <div class="col-md-8" v-if="showOrUpdateTest.test.daType == 2">
                  <input type="text" :readOnly="showOrUpdateTest.handlerType == 1" 
                  class="form-control" v-model="item.da" >
                </div>
                <div class="col-md-8" v-if="showOrUpdateTest.test.daType == 1">
                  <select name="" id="" class="form-control" v-model="item.da" :readOnly="showOrUpdateTest.handlerType == 1"  >
                    <option :value="true">true</option>
                    <option :value="false">false</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="form-group" >
              <div class="col-md-12 text-right">
                <button class="btn btn-default" @click.prevent="tabToggle(tabIndex)" >返回</button>
                <button class="btn btn-success" @click.prevent="updateTest" 
                v-show="showOrUpdateTest.handlerType == 2" >确认修改</button>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
      <div id="newResult" v-if="addResult">
        <new-result-component :topic="needResultTopic" 
            v-on:back-result-list="tabToggle(2)"
        ></new-result-component>
      </div>
    </div>
  
  </div>

  <!--添加练习题组件-->
  <template id="newTopic">
    <form action="" class="form-horizontal" >
      <fieldset>
        <legend>习题基本信息</legend>
        <div class="form-group">
          <label for="" class="label-control col-md-2">习题标题</label>
          <div class="col-md-4">
            <input type="text" class="form-control" v-model="newTopic.name" placeholder="请输入习题标题">
          </div>
          
          <label for="" class="label-control col-md-2">习题描述</label>
          <div class="col-md-4">
            <input type="text" class="form-control" v-model="newTopic.desc" placeholder="请输入简单的描述">
          </div>

        </div>
        <div class="form-group">
          <label for="" class="label-control col-md-2">习题类型</label>
          <div class="col-md-4">
            <select class="form-control" v-model="newTopic.type">
              <option v-for="(type, index) in newTopicType" :value="index + 1">
                {{type}}
              </option>
            </select>
          </div>


          <label for="" class="label-control col-md-2">答题类型</label>
          <div class="col-md-4">
            <select class="form-control" v-model="newTopic.daType">
              <option :value="1">判断对错</option>
              <option :value="2">自由答题</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label for="" class="label-control col-md-2">关键字</label>
          <div class="col-md-4">
            <input type="text" class="form-control" placeholder="请输入关键字，用一个空格分割" v-model="newTopic.keyword">
          </div>
        </div>
      </fieldset>
      <fieldset>
        <legend>习题内容</legend>
        <div class="addedTopic">
          <h3 class="text-center" v-show="!newTopic.content.length">还没有添加问题</h3>
          <ul class="list-group" v-show="newTopic.content.length > 0">
            <li class="list-group-item" v-for="(topic, index) in newTopic.content" >
              {{index + 1}}.  {{topic.wen}}
            </li>
          </ul>
        </div>
        <div class="form-group">
          <label for="" class="col-md-3 label-control">请输入新的习题问题</label>
          <div class="col-md-5">
            <input type="text" placeholder="输入您的问题" class="form-control" v-model="stripTopicInfo">
          </div>
          <div class="col-md-4">
            <button class="btn btn-success" @click.prevent="addStripTopic">点此添加</button>
          </div>
        </div>
      </fieldset>
      <fieldset>
        <legend>提交区</legend>
        <div class="form-group">
          <div class="col-md-3 col-md-offset-3">
            <button @click.prevent="submitNewTopic" class="btn btn-primary">提交此习题</button>
          </div>
        </div>
      </fieldset>
    </form>
  </template>

  <template id="newResult" >
    <form action="" class="form form-horizontal">
      <fieldset>
        <legend>习题基本信息</legend>
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>习题名称</th>
              <th>习题类型</th>
              <th>答题类型</th>
              <th>作者</th>
              <th>创建时间</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                {{topic.name}} 
              </td>
              <td>
                {{newTopicType[topic.type]}} 
              </td>
              <td>
                {{topic.daType == 1 ? '判断对错': '自由答题'}}
              </td>
              <td>
                {{topic.autor}}
              </td>
              <td>
                {{topic.createdAt | date}} 
              </td>
            </tr>
          </tbody>
        </table>  
      </fieldset>
      <fieldset>
        <legend>答案录入区域</legend>
        <div class="form-group" v-for="(item, index) in newResult.content" >
          <label for="" class="label-control col-md-4">{{index + 1}} {{item.wen}} </label>
          <div class="col-md-8" v-if="newResult.daType == 2">
            <input type="text" class="form-control" v-model="item.da" >
          </div>
          <div class="col-md-8" v-if="newResult.daType == 1">
            <select name="" id="" v-model="item.da" class="form-control">
              <option value="">--请选择--</option>
              <option :value="true">true</option>
              <option :value="false">false</option>
            </select>
          </div>
        </div>
        <div class="form-group" >
          <div class="col-md-12 text-right">
            <button class="btn btn-success" @click.prevent="addResultTest"  >创建答案</button>
          </div>
        </div>
      </fieldset>
    </form>
  </template>
  
  <!--查看练习题组件-->
  <!-- <template id="topic-card">
    <div class="test-base-info">
      {{tabIndex}}
      <div class="test-item">
        练习题：{{handlerTest.name}}
      </div>
      <div class="test-item">
        习题类型：{{handlerTest.type}}
      </div>
      <div class="test-item">
        答题类型：{{handlerTest.daType}}
      </div>
      <div class="test-item">
        作者： {{handlerTest.autor}}
      </div>
      <div class="test-item">
        创建时间： {{handlerTest.createAt | date}}
      </div>
    </div>
  </template> -->


  <script type="text/javascript" src="/lib/vue/vue.min.js"></script>
  <script src="/lib/vue/vue-resource.min.js"></script>
  <script src="/scripts/assets/filter.js"></script>
  <script src="/scripts/assets/util.js"></script>
  <script>

    Vue.use(VueResource)

    // var topicCardComponent = Vue.component('topic-card-component', {
    //   template: '#topic-card',
    //   data: function () {
    //     return {

    //     }
    //   },
    //   props: ['handlerTest', 'handlerType' , 'tabIndex']
    // })
    
    var newResultComponent = Vue.component('new-result-component', {
      template: '#newResult',
      data: function () {
        return {
          newResult: {
            name: '',
            desc: '',
            type: 1,
            daType: 2,
            autor: '',
            content: [],
            keyword: ''
          },
          newTopicType: ['IT知识', '生活常识', '问卷调查']
        }
      },
      mounted: function () {
        this.initResult()
      },
      methods: {
        initResult: function () {
          // var resultWens = this.newResult.content
          // var wens = this.topic.content
          // for (var i = 0; i < wens.length; i ++) {
          //   resultWens.push(wens[i])
          // }
          // ['type', 'daType', 'name', 'desc'].map(function (key) {
          //   this.newResult[key] = this.topic[key]
          // }.bind(this))
          
          this.newResult = $$.extend({}, this.topic)

        },
        addResultTest: function () {
          this.newResult.autor = sessionStorage.memoryClassAdmin ? 'admin' : JSON.parse(localStorage.memoryClassUser).name
          this.$http.post('/test/newTest/type/3', {content: this.newResult}).then(function (res) {
            if (res.data.code == 100) {
              alert('创建答案成功')
              this.$emit('back-result-list')
            } else {
              alert(res.data.msg)
            }
          })
        }
      },
      props: ['topic']
    })

    var newTopicComponent = Vue.component('new-topic-component', {
      template: '#newTopic',
      data: function () {
        return {
          newTopic: {
            name: '',
            type: 1,
            daType: 2,
            autor: '',
            content: [
            ],
            keyword: ''
          },
          stripTopicInfo: ''
        }
      },
      methods: {
        submitNewTopic: function () {
          var topic = this.newTopic
          if (!this.trim(topic.name)) {
            return alert('请填写习题名称')
          }
          // if (/[\u4E00-\u9FA5]/.test(topic.name)) {
          //   return alert('习题名称不能含中文')
          // }
          // if (topic.content.length < 5) {
          //   return alert('一份习题至少需要有5个问题')
          // }
          topic.autor = sessionStorage.memoryClassAdmin ? 'admin' : JSON.parse(localStorage.memoryClassUser).name
          this.$http.post('/test/newTest/type/1', {content: topic}).then(function (res) {
            if (res.data.code == 100) {
              alert('习题创建成功')
              this.newTopic = {
                name: '',
                desc: '',
                type: 1,
                daType: 2,
                autor: '',
                content: []
              }
              this.$emit('back-topic-list')
            } else {
              alert(res.data.msg)
            }
          })
        },
        addStripTopic: function () {
          var val = this.stripTopicInfo
          if (val.length == 0) {
            return alert('问题不能为空')
          }
          this.newTopic.content.push({
            wen: val,
            da: ''
          })
          this.stripTopicInfo = ''
        },
      },
      props: ['trim', 'newTopicType']
    })
 
    new Vue({
      el: '#app',
      data: {
        newTopicType: ['IT知识', '生活常识', '问卷调查'],
        list: [],
        checking: false,
        checkItem: {},
        logined: false,
        admin: {
          user: '',
          password: ''
        },
        tabIndex: 0,
        testTypes: [2, 1, 3],
        addTopic: false,
        addResult: false,
  
        page: 1,
        showOrUpdateTest: {
          handlerType: 0,
          test: {}
        },

        needResultTopic: {}

      },
      mounted: function () {
        
        this.getList(2, 1)
      
      },
      methods: {
        toCheck: function (item) {
          this.checkItem = item
          this.checking = true
        },
        adminLogin: function (ev) {
          ev.preventDefault()

          this.$http.get('/admin/login', {
            params: this.admin
          }).then(function (res) {
            console.log(res.data)
            if (res.data.code == 100) {
              sessionStorage.memoryClassAdmin = true
              this.logined = true
            } else {
              alert(res.data.msg)
            }
          })
        },
        tabToggle: function (i) {
          this.tabIndex = i
          this.addTopic = this.addResult = false
          this.showOrUpdateTest = {
            handlerType: 0,
            test: {}
          }
          this.page = 1

          this.getList(this.testTypes[i], 1)

        },
        getList: function (type, page) {
          this.$http.get('/test/type/' + type + '/page/' + page).then(function (res) {
            if (res.data.code == 100) {
              this.list = res.data.data.list
              console.log('获取成功')
            } else if(res.data.code == 112) {
              this.list = []
            } else {
              alert(res.data.msg)
            }
          })
        },
        trim: function (str) {
          return str.replace(/(^\s+)|(\s+$)/g, '')
        },
        //----------习题的增删改查----------//
        //  增删改查;
        handlerTest: function (handlerType, index) {
          if (handlerType < 3) {
            this.showOrUpdateTest = {
              handlerType: handlerType,
              test: this.list[index]
            }
          } else {
            //  删除
            var id = this.list[index].id
            var type = this.testTypes[this.tabIndex]
            this.$http.delete('/test/type/' + type + '/id/' + id).then(function (res) {
              if (res.data.code == 100) {
                alert(res.data.msg)
                this.tabToggle(this.tabIndex)
              } else {
                alert(res.data.msg)
              }
            })
          }
          
        },
        updateTest: function () {
          var newTest = this.showOrUpdateTest.test

          this.$http.put('/test/updateTest/type/' + this.testTypes[this.tabIndex], newTest).then(function (res) {
            if (res.data.code == 100) {
              alert('更新成功')
              this.showOrUpdateTest = {
                handlerType: 0,
                test: {}
              }
            } else {
              alert(res.data.msg)
            }
          })
        },
        //  给习题添加答案数据，先判断是否已存在答案，再做进一步处理
        addResultForTopic: function (index) {

          var test = this.list[index]

          this.$http.get('/test/type/3/id/' + test.id).then(function (res) {
            console.log(res.data)
            if (res.data.code == 100) {
              alert('该习题已经有答案了')
              this.tabToggle(2)
            } else if (res.data.code == 112) {
              //  进入答案录入页面
              this.needResultTopic = test
              this.addResult = true
              
            } else {
              alert(res.code.msg)
            }
          })
        }
        
      },
      components: {
        'new-topic-component': newTopicComponent,
        'new-Result-component': newResultComponent
        // 'topic-card-component': topicCardComponent
      }
    })

  </script>
</body>
</html>